<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport"/>
    <title>定时抢购</title>
    <link rel="stylesheet" th:href="@{../css/index.css}" type="text/css">
    <link rel="stylesheet" th:href="@{../css/main.css}" type="text/css">
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<p style="color: red;text-align: center">请确保商品已经预约并加入了购物车</p>
<div id="container">
    <div class="content">
        <span>手机号</span>
        <label for="phone">
            <input class="inputContent" id="phone" name="phone" type="text" v-model="phone">
        </label>
    </div>
    <div class="content">
        <span>时间</span>
        <label for="time" style="font-size: 20px">
            <input class="inputContent" id="time" name="time" type="datetime-local" v-model="time">
        </label>
    </div>
    <div class="content">
        <span>时间11</span>
        <label for="time" style="font-size: 20px">
            <input class="inputContent" id="date" name="date" type="datetime-local" v-model="date">
        </label>
    </div>
    <button class="light-btn" style="margin-top: 150px" v-on:click="timingSubmitOrder()">提交</button>
    <div style="margin-top: 50px;font-size: 30px" v-bind:style="{'color':color}" v-clock v-if="msg !== ''">{{msg}}</div>
</div>
<script th:src="@{../js/vue.min.js}"></script>
<script th:src="@{../js/axios.min.js}"></script>
<script>
    new Vue({
        el: "#container",
        data: {
            msg: "",
            phone: "",
            pid: "",
            time: "",
            color: ""
        },
        methods: {
            timingSubmitOrder() {
                axios({
                    method: "POST",
                    url: "timingSubmitOrder",
                    data: {
                        phone: this.phone,
                        pid: this.pid,
                        time: this.time
                    }
                }).then(res => {
                    if (res.data.code === 0) {
                        this.color = "green";
                    } else {
                        this.color = "red";
                    }
                    this.msg = res.data.msg;
                });
            },
        }
    });
</script>
</body>
</html>